<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>菜品展示</title>
  <script src="js/vue.js"></script>
  <script src="js/axios.min.js"></script>
  <style>
    /* 基本样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', sans-serif;
    }

    body {
      background-color: #f4f4f4;
      color: #333;
      line-height: 1.6;
    }

    header {
      background-color: #f2c57f;
      padding: 20px 0;
      text-align: center;
    }

    header .logo h1 {
      font-size: 36px;
      color: #fff;
      font-weight: bold;
    }

    main {
      padding: 20px;
    }

    .menu {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .dish-card {
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      width: 280px;
      overflow: hidden;
      text-align: center;
      transition: transform 0.3s ease-in-out;
    }

    .dish-card:hover {
      transform: translateY(-10px);
    }

    .dish-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }

    .dish-info {
      padding: 15px;
    }

    .dish-info h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 10px;
    }

    .dish-info .price {
      font-size: 20px;
      color: #e74c3c;
      font-weight: bold;
    }

    footer {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding: 10px;
      margin-top: 40px;
    }
    .saveOrderBtn{
      width: 80px;
      height: 40px;
      background-color: #d9232e;
      border: none;
      color: white;
      border-radius: 4px
    }
  </style>
</head>
<body>
<header>
  <div class="logo">
    <h1>美味餐点</h1>
  </div>
</header>

<main id="app">
  <section class="menu">
    <!--    =============    核心的菜品数据展示   =============  -->
    <div class="dish-card">
      <img :src="dish.dishImg" >
      <div class="dish-info">
        <h2>{{dish.dishName}} </h2>

        <p class="price">¥ {{dish.dishPrice}}</p>
      </div>
    </div>

    <form>
      <span>可使用的优惠券：</span>
      <select   @change="getSelectedCoupon($event)">
        <option >--请选择优惠券--</option>
        <option  v-for="(mycoupon ,index) in myCouponList" :value="mycoupon.mycouponId" :key="mycoupon.mycouponId">
          {{mycoupon.other1}}
        </option>
      </select>

    </form>

    <button class="saveOrderBtn" @click="saveOrder()" >下订单</button>
  </section>
</main>

<footer>
  <p>&copy; 2025 美味餐点</p>
</footer>

<script>
  const vm =  new Vue({
    el:"#app",
    data:{
      dish:{
        dishId:"",
        dishName:"",
        dishImg:"",
        dishPrice:""
      },
      myorder:{
        dishId:"",
        dishName:"",
        dishPrice:"",
        dishImg:""
      },
      myCouponList:[],  // 我的优惠券列表
      selectedCoupon: {  // 选中的优惠券对象
        mycouponId:"",
        other1:"",
        other2:""
      },
      newOrder:{
        orderId:"",
        dishId:"",
        dishName:"",
        dishImg:"",
        dishPrice:"",
        orderPrice:"",
        couponName:"",
        mycouponId:"",
      },
      selectedCouponId: null


    },
    mounted(){ // 页面加载的时候，就要执行的代码

      this.getById(),   // 在页面加载的时候 就要查询菜品详情
              this.getAllMyCoupons();  // 加载当前用户有效的优惠券
    },
    methods:{
      // 查询菜品详情
      getById(){
        //1. 获得 URL后面的id 值
        const  urlParams = new URLSearchParams(window.location.search)
        const id = urlParams.get("id")
        console.log("id = " + id)
        //2. 调用后端 查询菜品详情
        var url = "dish/"+id
        axios.get(url).then(response=>{
          if(response.data.code == 200) {
            console.log(response.data.data)
            this.dish = response.data.data;
          }else{
            console.log(response.data.data)
          }
        }).catch(error=>{
          console.log(error)
        })
        //3. 获得结果后， 渲染 菜品 数据到页面
      },
      // 查询当前用户有效的优惠券
      getAllMyCoupons(){
        axios.get("mycoupon/status/0")
                .then(response=>{
                  this.myCouponList = response.data.data;  // mycoupon, couponName
                  console.log(response.data.data)
                }).catch(error=>{
          console.log(error)
        })
      },
      // 获得用户选中的优惠券
      getSelectedCoupon(event){
        console.log("===========选中的优惠券的===============")
        const mycouponId = event.target.value;  // 获取选中的优惠券ID
        console.log("选中的优惠券的id:" + mycouponId)
        const selectedCoupon = this.myCouponList.find(mycoupon => mycoupon.mycouponId === parseInt(mycouponId));

        // 将选中的优惠券信息保存到 `selectedCoupon` 对象
        if (selectedCoupon) {
          this.selectedCoupon.mycouponId = selectedCoupon.mycouponId;
          this.selectedCoupon.other1 = selectedCoupon.other1;
          this.selectedCoupon.other2 = selectedCoupon.other2;  // 保存优惠券的价格
        } else {
          this.selectedCoupon = { mycouponId: null, other1: '', other2: null };
        }

        console.log('选中的优惠券:', this.selectedCoupon);
      },
      saveOrder(){
        this.newOrder.dishId = this.dish.dishId
        this.newOrder.dishName = this.dish.dishName
        this.newOrder.dishImg = this.dish.dishImg
        this.newOrder.dishPrice = this.dish.dishPrice
        this.newOrder.mycouponId = this.selectedCoupon.mycouponId
        this.newOrder.mycouponName = this.selectedCoupon.other1
        this.newOrder.couponPrice = this.selectedCoupon.other2

        if(this.newOrder.couponPrice != null)
          this.newOrder.orderPrice = this.newOrder.dishPrice -   this.newOrder.couponPrice
        else
          this.newOrder.orderPrice =  this.newOrder.dishPrice

        console.log("要提交的订单的信息是："  )
        console.log(  this.newOrder)
        axios.post("myorder",this.newOrder)
                .then(response=>{
                  console.log("添加订单成功===")
                  console.log(response.data.data)
                  this.newOrder.orderId = response.data.data.orderId
                  // 根据orderId 查询订单详情
                  window.location.href="order_detail.html?id=" +   this.newOrder.orderId


                }).catch(error=>{
          console.log(error)
        })
      },




    }

  })
</script>

</body>
</html>
